<template>
  <div id="ScoreStyle">
    <el-collapse v-model="collapseValue" accordion>
      <!-- single -->
      <!-- <div v-if="parentInfo.type=='content'"> -->
      <div v-if="scoreData.length > 0 && scoreData[0].flag == '0'">
        <!-- <el-button type="text" @click.stop="addItem()">添加条目</el-button>
        <div style="height:50px" class="appq">
          <el-button v-if="filterAddShow(item,'0')" class="fr mg-5" type="text" size="mini" plain @click.stop="addUpEntry(item.id,'新增',null)">添加条目</el-button>
        </div> -->
        <el-table :data="scoreData" border style="width: 100%">
          <el-table-column type="index" label="序号" align="center" width="50" />
          <el-table-column prop="name" label="描述" align="center" />
          <!-- <el-table-column prop="showIndex" label="序号" width="100" align="center" /> -->
          <el-table-column prop="score" label="得分" width="100" align="center" />
          <el-table-column prop="type" label="类型" width="100" align="center">
            <template slot-scope="scope">
              <span v-html="scope.row.type == '1' ? '单选' : '多选'" />
            </template>
          </el-table-column>
          <el-table-column prop="groupIndex" label="组别" width="100" align="center">
            <template slot-scope="scope">
              <span v-html="scope.row.groupIndex" />
            </template>
          </el-table-column>
          <el-table-column width="80" align="center" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="addUpEntry(scope.row.parentsId, '修改', scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- order -->
      <!-- <span v-if="parentInfo.type=='title'"> -->
      <span v-else>
        <el-collapse-item v-for="(item, index) in scoreData" :key="'order' + index" :name="index">
          <template v-if="item.flag == '1'" slot="title">
            <span>{{ item.name }}</span>
            <el-button type="text" icon="el-icon-edit" circle size="mini" @click="addUpProject(item.id, '修改', item)" />
            {{ parentInfo.classLevel }}
          </template>
          <div v-if="item.flag == '1'">
            <div style="height:40px" class="appq">
              <el-button v-if="filterAddShow(item, '1')" class="fl mg-5" type="text" size="mini" plain @click.stop="addUpProject(item.id, '新增', null)">新增项目</el-button>
              <el-button v-if="filterAddShow(item, '0')" class="fr mg-5" type="text" size="mini" plain @click.stop="addUpEntry(item.id, '新增', null)">添加条目</el-button>
            </div>
            <!-- 循环的order -->
            <SubComponents ref="scoreChild" :score-data="item.scoreClassList" :parent-info="inheritInfo(item)" @addItemTofather="filialBack" />
          </div>
        </el-collapse-item>
        <div v-if="scoreData.length == 0" style="padding-top:20px"><el-divider content-position="center">无数据</el-divider></div>
      </span>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: 'SubComponents',
  // props: ['scoreData'],
  props: {
    scoreData: {
      type: Array,
      // required: true,
      default() {
        return []
      }
    },
    parentInfo: {
      type: Object,
      default() {
        return {
          type: '',
          classLevel: '',
          classAIsSingle: ''
        }
      }
    }
  },
  data() {
    return {
      collapseValue: '0'
    }
  },
  created() {
    // console.log('parentInfo', this.parentInfo)
  },
  methods: {
    collapseReseat() {
      this.collapseValue = ''
      // console.log(this.$refs.scoreChild);
      this.$refs.scoreChild && this.$refs.scoreChild[0] && this.$refs.scoreChild[0].collapseReseat()
      // }
    },
    filterAddShow(item, types) {
      const dataChildren = item.scoreClassList || []
      if (types === '1' && (this.parentInfo.classAIsSingle || this.parentInfo.classLevel > 3)) {
        return false
      }
      if (dataChildren.length === 0) {
        return true
      } else {
        return dataChildren[0].flag === types
      }
    },
    inheritInfo(item) {
      const pInfo = {
        classLevel: parseInt(this.parentInfo.classLevel) + 1,
        type: item.fieldType
      }
      return pInfo
    },
    go(item) {
      console.log('item', item)
    },
    // 增改项目
    addUpProject(parentsId, type, item = null) {
      let level = parseInt(this.parentInfo.classLevel)
      if (type === '新增') {
        level++
      }
      const data = {
        level, // 当前层级
        type,
        parentsId, // 父级id
        item: item,
        property: 'title'
      }
      // console.log(11111, data)
      this.$emit('addItemTofather', data)
    },
    // 增改末级条目
    addUpEntry(parentsId, type, item = null) {
      let level = parseInt(this.parentInfo.classLevel)
      if (type === '新增') {
        level++
      }
      const data = {
        level, // 当前层级
        type,
        parentsId, // 父级id
        item: item,
        property: 'content'
      }
      this.$emit('addItemTofather', data)
    },
    // 向父级传递
    filialBack(data) {
      this.$emit('addItemTofather', data)
    }
  }
}
</script>

<style scoped>
#ScoreStyle >>> .el-collapse-item__content {
  padding: 5px 10px;
  border: 1px dotted #eee;
}
</style>
